{if $bg_img}
<div class="relative overflow-hidden bg-no-repeat bg-cover" style="
background-position: 50%;
background-image: url('{$bg_img}');
height: {$bg_height};
">
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.75)">
	<div class="flex justify-center items-center h-full">
		<div class="text-center text-white px-6 md:px-12">
			<h1 class="text-5xl font-bold mt-0 mb-6">{$heading}</h1>
			<h3 class="text-3xl font-bold mb-8">{$subHeading}</h3>
			{$button|raw}
		</div>
	</div>
</div>
</div>
{else /}
<div class="text-center bg-gray-50 text-gray-800 py-20 px-6">
    <h1 class="text-5xl font-bold mt-0 mb-6">{$heading}</h1>
    <h3 class="text-3xl font-bold mb-8">{$subHeading}</h3>
    {$button|raw}
  </div>
{/if}